<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Savour - Facebook voting app</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta property="og:title" content="Get your insight" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="http://apps.facebook.com/savourvoting/" />
        <meta property="og:image" content="" />
        <meta property="og:site_name" content="" />
        <meta property="fb:app_id" content="{FB.appId}"/>
        <meta property="og:description" content="" />
        <script type='text/javascript' src='<?php echo base_url(); ?>jquery.js'></script>	
        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
        <link href="<?php echo base_url(); ?>css/jquery-ui.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto" />
        <style type="text/css">
            * { margin:0; padding:0;}
            a { text-decoration:none;}
            #wrapper { background:url('<?php echo base_url(); ?>images/bg.png') no-repeat; width:810px; height:503px; position:relative;}
            #wrapper form { position:absolute; left:395px; top:380px;}
            .text {   
                color: #362318;
                float: left;
                font-family: 'Roboto',Arial;
                font-size: 7.9pt;
                font-weight: bold;
                text-transform: uppercase;
                width: 100%;
            }
            .text a { text-decoration:underline; color:#362318;}
            .btn { width:237px; height:41px; border:none; background:url('<?php echo base_url(); ?>images/votenow.png') no-repeat top left; cursor:pointer; margin-top:5px;}
        </style>
    </head>
    <body>
        <div style="font-size: 14px;" id="dialog-message" title="Agreeing to the Terms and Conditions">
            <p>
                To vote in this contest, you need to agree to the terms and conditions.
            </p>
        </div>
        <div style="font-size: 10px;" id="dialog-term" title="Terms & Conditions">
            <ul style="margin-left: 6px">
                <li>you may only vote once for each recipe</li>
                <li>you may vote for multiple recipes</li>
                <li>voting numbers are confidential</li>
                <li>voting closes 22 March 2359hrs</li>
                <li>Organisers have the right to amend these terms at their discretion without prior notice</li>
            </ul>
            After Vote pop up<br/>
            Thank you for voting! Don’t miss the excitement at the Live Bake Off at Savour 2013!
        </div>
        <div id="fb-root"></div>
        <script src="//connect.facebook.net/ja_JP/all.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $( "#dialog-message" ).dialog({
                    autoOpen: false,
                    position: ['top', 182],
                    width: 347,
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
                $( "#dialog-term" ).dialog({
                    autoOpen: false,
                    position: ['top', 149],
                    width: 568,
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
            });
            if(top==self){
                top.location.href = "<?php echo $this->config->item('redirect_uri_page'); ?>";
            }
            window.fbAsyncInit = function()  {
                FB.init({
                    appId  : '132572970256339',
                    oauth  : true
                });
                FB.Canvas.setSize({height: 503});
            };
            function openTermDialog(){
                $( "#dialog-term" ).dialog( "open" );
            }
            function validateForm()
            {
                if ($('#isvoter').is(":checked"))
                {
                    return true;
                }
                else
                {
                    $( "#dialog-message" ).dialog( "open" );
                    return false;
                }
            }
        </script>
        <div id="wrapper">
            <form id="form-term" name="form-term" method="post" onsubmit="return validateForm()" action ="<?php echo base_url(); ?>index.php/view/viewdefault">

                <p class="text">
                    <input style="margin-top: 3px; float: left; width: 10px;"type="checkbox" name="isvoter" value="1" id="isvoter"/>
                    <span style="float: left; margin-left: 4px; width: 377px;">
                        As a voter, <br />i understand and agree with the <a onclick="openTermDialog()" href="#">terms and conditions</a>
                    </span>
                </p>
                <p style="margin-left: 16px"><input type="submit" class="btn" name="submit" value="" /></p>
            </form>
        </div>
        <!--        <div id="wrapper">
                    <div id="header" style="height:600px !important">
                        
                    </div>
                    <div id="content">
                        
                    </div>
                    <div id="footer">
                                        <form id="form-term" name="form-term" method="post" onsubmit="return validateForm()" action ="<?php echo base_url(); ?>index.php/view/viewdefault">
                        <p>
                                                <span>
                                                        <input type="checkbox" name="isvoter" value="1" id="isvoter"/> As a voter, I understand and agree with the <a href="#">Terms and Conditions</a>
                                                        <input type="submit" name="btnVoteNow" value="VOTE NOW" style="background-color: skyblue; height: 25px; width: 200px; text-align: center;border:1px solid #001"/>
                                                </span>
                                                
                                        </p>
                                        </form>
                    </div>End #Footer
                </div>End #Wrapper-->
    </body>
</html>
